<template>
  <PageWrapper title="权限管理" content="权限管理，对角色的增删改查操作">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate"> 新增权限</a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column['key'] === 'action'">
          <TableAction
            :actions="[
              {
                icon: 'ant-design:form-outlined',
                onClick: handleEdit.bind(null, record),
              },
              {
                icon: 'ant-design:bars-outlined',
                onClick: handleMenuEdit.bind(null, record),
              },
              {
                icon: 'ant-design:control-outlined',
                onClick: handleComponentEdit.bind(null, record),
              },
              {
                icon: 'ant-design:api-outlined',
                onClick: handleApiEdit.bind(null, record),
              },
              {
                icon: 'ant-design:delete-outlined',
                color: 'error',
                popConfirm: {
                  title: '是否确认删除',
                  placement: 'left',
                  confirm: handleDelete.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <PermissionMenuModal
      v-if="showPermissionMenuModal"
      @register="registerMenuModal"
      @success="handleMenuSuccess"
      @cancel="handleMenuCancel"
    />
    <PermissionMenuComponentModal
      v-if="showPermissionMenuComponentModal"
      @register="registerComponentModal"
      @success="handleComponentSuccess"
      @cancel="handleComponentCancel"
    />
    <PermissionMenuApiModal
      v-if="showPermissionMenuApiModal"
      @register="registerApiModal"
      @success="handleApiSuccess"
      @cancel="handleApiCancel"
    />
    <RoleDrawer @register="registerDrawer" @success="handleSuccess" />
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';

  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { queryPermissionPage, removePermissionById } from '/@/api/system/system';

  import { useDrawer } from '/@/components/Drawer';
  import RoleDrawer from './PermissionDrawer.vue';

  import { columns, searchFormSchema } from './permission.data';
  import { PageWrapper } from '/@/components/Page';
  import { useModal } from '/@/components/Modal';
  import { PermissionReq } from '/@/api/system/modal/permissionModel';
  import PermissionMenuComponentModal from '/@/views/system/permission/PermissionMenuComponentModal.vue';
  import PermissionMenuApiModal from '/@/views/system/permission/PermissionMenuApiModal.vue';
  import PermissionMenuModal from '/@/views/system/permission/PermissionMenuModal.vue';

  export default defineComponent({
    name: 'PermissionManagement',
    components: {
      BasicTable,
      RoleDrawer,
      TableAction,
      PageWrapper,
      PermissionMenuModal,
      PermissionMenuComponentModal,
      PermissionMenuApiModal,
    },
    setup() {
      const [registerMenuModal, { openModal: openMenuModal }] = useModal();
      const [registerComponentModal, { openModal: openComponentModal }] = useModal();
      const [registerApiModal, { openModal: openApiModal }] = useModal();
      const [registerDrawer, { openDrawer }] = useDrawer();
      const [registerTable, { reload }] = useTable({
        title: '权限列表',
        api: queryPermissionPage,
        fetchSetting: {
          pageField: 'current',
          sizeField: 'size',
          totalField: 'total',
          listField: 'records',
        },
        columns,
        formConfig: {
          labelWidth: 120,
          schemas: searchFormSchema,
          showAdvancedButton: true,
        },
        useSearchForm: true,
        showTableSetting: true,
        bordered: true,
        showIndexColumn: true,
        actionColumn: {
          width: 200,
          title: '操作',
          dataIndex: 'action',
          // slots: { customRender: 'action' },
          fixed: undefined,
        },
      });

      const showPermissionMenuModal = ref<boolean>(false);
      const showPermissionMenuComponentModal = ref<boolean>(false);
      const showPermissionMenuApiModal = ref<boolean>(false);

      function handleCreate() {
        openDrawer(true, {
          isUpdate: false,
        });
      }

      function handleMenuEdit(record: Recordable) {
        showPermissionMenuModal.value = true;
        setTimeout(() => {
          openMenuModal(true, {
            record,
            isUpdate: true,
          });
        });
      }

      function handleMenuSuccess() {
        showPermissionMenuModal.value = false;
        reload();
      }

      function handleMenuCancel() {
        showPermissionMenuModal.value = false;
      }

      function handleComponentEdit(record: Recordable) {
        showPermissionMenuComponentModal.value = true;
        setTimeout(() => {
          openComponentModal(true, {
            record,
            isUpdate: true,
          });
        });
      }

      function handleComponentSuccess() {}

      function handleComponentCancel() {
        showPermissionMenuComponentModal.value = false;
        reload();
      }

      function handleApiEdit(record: Recordable) {
        showPermissionMenuApiModal.value = true;
        setTimeout(() => {
          openApiModal(true, {
            record,
            isUpdate: true,
          });
        });
      }

      function handleApiSuccess() {}

      function handleApiCancel() {
        showPermissionMenuApiModal.value = false;
        reload();
      }

      function handleEdit(record: Recordable) {
        openDrawer(true, {
          record,
          isUpdate: true,
        });
      }

      function handleSuccess() {
        reload();
      }

      async function handleDelete(record: Recordable) {
        const permissionReq: PermissionReq = {
          id: record?.id,
        };
        await removePermissionById(permissionReq);
        await reload();
      }

      return {
        registerTable,
        registerDrawer,
        registerMenuModal,
        registerComponentModal,
        registerApiModal,
        handleCreate,
        showPermissionMenuModal,
        showPermissionMenuComponentModal,
        showPermissionMenuApiModal,
        handleMenuEdit,
        handleMenuSuccess,
        handleMenuCancel,
        handleComponentEdit,
        handleComponentSuccess,
        handleComponentCancel,
        handleApiEdit,
        handleApiSuccess,
        handleApiCancel,
        handleEdit,
        handleSuccess,
        handleDelete,
      };
    },
  });
</script>
